import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { darkTheme } from 'naive-ui'

export const useThemeStore = defineStore('theme', () => {
  const theme = ref(localStorage.getItem('theme') === 'dark' ? darkTheme : null)

  const themeOverrides = computed(() => ({
    common: {
      primaryColor: theme.value === null ? '#0EA5E9' : '#8F959E',
      primaryColorHover: theme.value === null ? '#0284C7' : '#C2C7D0',
      primaryColorPressed: theme.value === null ? '#0369A1' : '#4E5969',
      borderRadius: '8px'
    },
    Button: {
      borderRadius: '8px',
      border: 'none',
      borderFocus: 'none',
      borderHover: 'none',
      borderPressed: 'none',
      textColor: theme.value === null ? '#64748B' : '#8F959E',
      textColorHover: theme.value === null ? '#0EA5E9' : '#C2C7D0',
      textColorPressed: theme.value === null ? '#0284C7' : '#4E5969',
      fontWeight: '500',
      colorPrimary: theme.value === null ? '#0EA5E9' : '#8F959E',
      colorHoverPrimary: theme.value === null ? '#0284C7' : '#C2C7D0',
      colorPressedPrimary: theme.value === null ? '#0369A1' : '#4E5969',
      colorFocus: 'transparent',
      colorFocusPrimary: 'transparent'
    },
    Input: {
      borderRadius: '8px',
      borderFocus: 'none',
      boxShadowFocus: theme.value === null 
        ? '0 0 0 2px rgba(14, 165, 233, 0.2)'
        : '0 0 0 2px rgba(75, 158, 255, 0.2)',
      color: theme.value === null ? '#FFFFFF' : '#1C1C1C',
      colorFocus: theme.value === null ? '#FFFFFF' : '#1C1C1C',
      textColor: theme.value === null ? '#1E293B' : '#E5E6EB',
      placeholderColor: theme.value === null ? '#94A3B8' : '#4E5969',
      border: theme.value === null ? '1px solid #E2E8F0' : '1px solid #2F3237'
    },
    Card: {
      borderRadius: '24px',
      color: theme.value === null ? '#FFFFFF' : '#232324',
      textColor: theme.value === null ? '#1E293B' : '#E5E6EB'
    },
    Form: {
      feedbackTextColor: theme.value === null ? '#EF4444' : '#F53F3F',
      feedbackTextColorWarning: theme.value === null ? '#F59E0B' : '#FF9A2E',
      labelTextColor: theme.value === null ? '#64748B' : '#8F959E'
    }
  }))

  const toggleTheme = () => {
    theme.value = theme.value === null ? darkTheme : null
    localStorage.setItem('theme', theme.value === null ? 'light' : 'dark')
  }

  return {
    theme,
    themeOverrides,
    toggleTheme
  }
}) 